package com.example.jetpackcomposelayouts

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.FirstBaseline
import androidx.compose.ui.layout.layout
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.example.jetpackcomposelayouts.ui.theme.Dn_LearningTheme

/**
 * Author：young
 * .
 * Time： 28/9/2023 上午8:54 周四
 * .
 * Desc：
 *
 * 18-自定义布局-使用修饰符
 * https://www.bilibili.com/video/BV1ob4y1a7ad/?p=18&spm_id_from=pageDriver&vd_source=e07cc8cc94eb22bd76722071b03cd199
 */
fun Modifier.firstBaselineToTop(
    firstBaselineToTop: Dp
): Modifier {
    return this.then(
        layout { measurable, constraints ->
            // 测量元素
            val placeable = measurable.measure(constraints = constraints)
            // 测量之后，获取元素的基线值
            val firstBaseLine = placeable[FirstBaseline]

            // 元素新的Y坐标 = 新的基线值 - 旧基线值
            val placeableY = firstBaselineToTop.roundToPx() - firstBaseLine
            // 新的高度
            val height = placeable.height + placeableY
            layout(placeable.width, height) {
                // 设置元素的位置
                placeable.placeRelative(0, placeableY)
            }
        }
    )
}


@Composable
fun TextWithPaddingToBaseline() {
    Dn_LearningTheme {
        Text(
            text = "Hi there!", modifier = Modifier
                .firstBaselineToTop(24.dp)
                .background(Color.Red)
        )
    }
}